<template>
  <div class="nav">
    <div class="nav_box">
      <div class="logo_box">
        <a>
          <img src="../assets/guologo.png" alt="" class="logo" />
          <!-- <img src="../assets/logo1.jpg" alt="" class="logo" /> -->
        </a>
        <!-- <span class="title-logo">AI合规性评估与主流价值语料库</span> -->
      </div>
      <div class="nav_right">
        <div class="log_reg">
          <el-dropdown @command="handleOperate">
            <span>
              <a style="color: white; cursor: pointer">{{ username }}</a>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <ul class="nav_list">
          <!-- <el-dropdown @command="gotopage">
            <li class="nav_li" menuorder="4">
              <a
                :class="{
                  nav_list_li_b:
                    $route.path == '/titleList' ||
                    $route.path == '/questionInput' ||
                    $route.path == '/questionEdit' ||
                    $route.path == '/questionGraph' ||
                    $route.path == '/selectedList' ||
                    $route.path == '/collectionList' ||
                    $route.path == '/answerList',
                  nav_list_li_a: true,
                }"
                @click="gotopage('titlelist')"
                >题库</a
              >
            </li>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="titlelist"
                ><span>全量题库</span>
              </el-dropdown-item>
              <el-dropdown-item command="answerList"
                ><span>回答列表</span></el-dropdown-item
              >
              <el-dropdown-item
                v-if="['超级管理员'].includes(limits)"
                command="collectionList"
                ><span>征集题库</span></el-dropdown-item
              >
              <el-dropdown-item
                v-if="['超级管理员'].includes(limits)"
                command="selectedList"
                ><span>精选题库</span></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown> -->
          

        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

      username: "yanjiuyibu",

      rule: {
        src_pwd: [
          { required: true, message: "请输入原密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        new_pwd: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    handleCommand(command) {
      this.gotoUrl(command);
    },
    gotoUrl(url) {
      window.open(url, "_blank");
    },
    gotopage(selectRouter) {
      switch (selectRouter) {
        case "titlelist":
          if (this.$route.name != "titlelist") {
            this.currentRouter = selectRouter;
            let routeData = this.$router.resolve({ path: "/titlelist" });
            window.open(routeData.href, "_blank");
            // this.$router.push("/routeArticle");
          }

          break;
        case "taskList":
          if (this.$route.name != "taskList") {
            this.currentRouter = selectRouter;
            let routeData = this.$router.resolve({ path: "/taskList" });
            window.open(routeData.href, "_blank");
          }

          break;
        case "checkList":
          if (this.$route.name != "checkList") {
            this.currentRouter = selectRouter;
            let routeData = this.$router.resolve({ path: "/checkList" });
            window.open(routeData.href, "_blank");
          }

          break;
        case "answerList":
          if (this.$route.name != "answerList") {
            this.currentRouter = selectRouter;
            let routeData = this.$router.resolve({ path: "/answerList" });
            window.open(routeData.href, "_blank");
          }

          break;
        case "collectionList":
          if (this.$route.name != "collectionList") {
            this.currentRouter = selectRouter;
            let routeData = this.$router.resolve({ path: "/collectionList" });
            window.open(routeData.href, "_blank");
          }

          break;
        case "selectedList":
          if (this.$route.name != "selectedList") {
            this.currentRouter = selectRouter;
            let routeData = this.$router.resolve({ path: "/selectedList" });
            window.open(routeData.href, "_blank");
          }

          break;
        case "assignTask":
          if (this.$route.name != "assignTask") {
            this.currentRouter = selectRouter;
            let routeData = this.$router.resolve({ path: "/assignTask" });
            window.open(routeData.href, "_blank");
          }

          break;
        case "checkProgress":
          if (this.$route.name != "checkProgress") {
            this.currentRouter = selectRouter;
            let routeData = this.$router.resolve({ path: "/checkProgress" });
            window.open(routeData.href, "_blank");
          }

          break;
        case "labelList":
          if (this.$route.name != "labelList") {
            this.currentRouter = selectRouter;
            let routeData = this.$router.resolve({ path: "/labelList" });
            window.open(routeData.href, "_blank");
          }

          break;
        case "questionProgress":
          if (this.$route.name != "questionProgress") {
            this.currentRouter = selectRouter;
            let routeData = this.$router.resolve({ path: "/questionProgress" });
            window.open(routeData.href, "_blank");
          }

          break;
        case "manageProgress":
          if (this.$route.name != "manageProgress") {
            this.currentRouter = selectRouter;
            let routeData = this.$router.resolve({ path: "/manageProgress" });
            window.open(routeData.href, "_blank");
          }

          break;
        case "evaluateList":
          if (this.$route.name != "evaluateList") {
            this.currentRouter = selectRouter;
            let routeData = this.$router.resolve({
              path: "/evaluateList",
              query: {
                assignmentid: "7ea43b466f9c7b9bdc82d09603a5e2fc",
                assignment: "文心一言",
              },
            });
            window.open(routeData.href, "_blank");
          }

          break;
      }
    },
    handleEdit() {
      this.dialogVisible = true;
    },
    handleOperate(command) {
      switch (command) {
        case "logout":
          this.close();
          break;
        case "edit":
          this.handleEdit();

          break;
      }
    },
    close() {
      localStorage.removeItem("autu");
      this.$router.push("/login3d");
    },
  },
};
</script>

<style scoped>
.nav {
  background-image: url(../assets/nav_bg.png);
  height: 120px;
}
.selected {
  color: #409eff;
}
.title-logo {
  position: absolute;
  font-size: 45px;

  left: 240px;
  top: 26px;
}
.nav_box {
  width: 1200px;
  height: 110px;
  margin: 0 auto;
  vertical-align: bottom;
}
.logo_box {
  height: 10px;
  float: left;
}
.logo {
  float: left;
  cursor: pointer;
  position: absolute;
  left: 40px;
  margin-top: -45px;
  margin-left: -65px;
  border: none;
  height: 225px;
  width: 100%;
  width: 280px;
}
.nav_right {
  height: 100px;
  float: right;
  position: absolute;
  right: 40px;
  top: 25px;
}
.log_reg {
  margin-top: 0px;

  font-size: 14px;
  font-family: "microsoft yahei";
  color: #333333;
  position: absolute;
  right: 0px;
  width: 230px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.nav_list {
  cursor: pointer;
  line-height: 30px;
  margin-top: 50px;
}
.nav_list li {
  list-style: none;
  float: left;
  font-size: 16px;
  color: white;
  margin-left: 22px;
  position: relative;
  list-style: none;
}

.nav_list_li_a {
  text-decoration: none;
  color: white;
  font-size: 14px;
}
.nav_list_li_a:hover {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-size: 14px;
}
.nav_list_li_b {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-size: 14px;
}
</style>